<template>
	<view class="login_box">
		<view class="login_box_top u-flex-col u-col-center u-felx-1">
			<u-image width="100%" height="480rpx" src="/static/bg_img/login.png"></u-image>
			<u-image class="logo_2" width="200rpx" height="200rpx" src="/static/logos/logo_1.png"></u-image>
		</view>

		<view class="u-padding-left-30 u-padding-right-30">
			<myp-input
				label="用户名"
				v-model="phone"
				mode="number"
				:maxlength="11"
				icon="phone"
				height="l"
				placeholder="输入手机号"
				space="20rpx"
				boxStyle="padding-left:10rpx;padding-right:10rpx;"
				:format="[3, 4, 4]"
			></myp-input>
			<myp-input
				label="密  码 "
				v-model="password"
				:maxlength="24"
				:password="pwdNoVisible"
				:indicator="rightEye"
				icon="lock"
				height="l"
				placeholder="密码"
				space="20rpx"
				boxStyle="padding-left:10rpx;padding-right:10rpx;"
				@indicatorClicked="togglePwdVisible"
			></myp-input>
			<myp-input v-model="code" mode="number" :maxlength="4" icon="lock" height="l" placeholder="四位验证码" space="20rpx" boxStyle="padding-left:10rpx;padding-right:10rpx;">
				<view slot="extra" @tap="toGetCode">
					<text :class="['bi-code', seconds === 0 && 'bi-code-active']">{{ codeHintText }}</text>
				</view>
			</myp-input>
			<view style="height: 100rpx;"></view>
			<u-button type="primary">登录</u-button>
			<view style="height: 100rpx;"></view>
			<u-image height="150rpx" src="/static/logos/logo_2.png"></u-image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			seconds: 0,
			timer: null,
			pwdNoVisible: true,
			password: '',
			phone: '',
			code: '' // 验证码
		};
	},
	methods: {
		togglePwdVisible() {
			this.pwdNoVisible = !this.pwdNoVisible;
		},

		toGetCode() {
			if (this.seconds > 0) {
				return;
			}
			this.makeTimer();
		},
		makeTimer() {
			this.seconds = 60;
			const that = this;
			this.timer = setInterval(function() {
				if (that.seconds >= 1) {
					that.seconds = that.seconds - 1;
				} else {
					that.seconds = 0;
					clearInterval(that.timer);
					that.timer = null;
				}
			}, 1000);
		}
	},
	computed: {
		rightEye() {
			return this.pwdNoVisible ? 'eye' : 'eye-close';
		},
		codeHintText() {
			if (this.seconds === 0) {
				return '获取验证码';
			}
			return `${this.seconds}s后重新获取`;
		}
	},
	onUnload() {
		this.timer && clearInterval(this.timer);
	}
};
</script>

<style scoped lang="scss">
.login_box_top {
	position: relative;
	background-color: #409eff;
	margin-bottom: 150rpx;
}
.login_box {
	background-color: #fff;
	height: 100vh;
}
.logo_2 {
	position: absolute;
	bottom: -100rpx;
}
</style>
